/*
 * @Author: funlee 
 * @Email: i@funlee.cn 
 * @Date: 2017-12-12 10:47:15 
 * @Last Modified time:   2017-12-12 10:47:15 
 * @Description: 加载不同的在线地图
 *               主要包括开源的Open Street Map，微软的Bing地图，Stamen地图
 * 
 *               由于MapQuest开始收费，ol v3.17.0就移除了ol.source.MapQuest
 */
import ol from 'openlayers'
import 'openlayers/dist/ol.css'

export default () => {
  console.log('render a map')
  // Open Street Map 地图层
  var openStreetMapLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  // Bing地图层
  var bingMapLayer = new ol.layer.Tile({
    source: new ol.source.BingMaps({
      key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
      imagerySet: 'Road'
    })
  });

  // Stamen地图层
  var stamenLayer = new ol.layer.Tile({
    source: new ol.source.Stamen({
      // layer: 'watercolor'
      // layer:'terrain' // 地形地势
      // layer:'stamenLayer',
      // layer: 'terrain-background'
      // layer:'toner'
      layer:'toner-hybrid'
    })
  });

  // 创建地图
  var map = new ol.Map({
    layers: [
      stamenLayer
    ],
    view: new ol.View({
      // 设置成都为地图中心
      center: [104.06, 30.67],
      projection: 'EPSG:4326',
      zoom: 10
    }),
    target: 'map'
  });

  document.querySelector('.osmMap').addEventListener('click',function() {
    // 先移除当前的地图，再添加Open Street Map 地图
    map.removeLayer(map.getLayers().item(0));
    map.addLayer(openStreetMapLayer);
  })

  document.querySelector('.bingMap').addEventListener('click', function () {
    // 先移除当前的地图，再添加Bing地图
    map.removeLayer(map.getLayers().item(0));
    map.addLayer(bingMapLayer);
  })

  document.querySelector('.stamenMap').addEventListener('click', function () {
    // 先移除当前的地图，再添加stamen地图
    map.removeLayer(map.getLayers().item(0));
    map.addLayer(stamenLayer);
  })

}
